<template>
  <div class="result-container">
    <h1>卦象解读结果</h1>
    
    <div v-if="result" class="gua-result">
      <div class="question-section">
        <label>您的问题</label>
        <div class="question-text">{{ result.question }}</div>
      </div>

      <div class="coin-section">
        <div class="current-step">
          <p>六爻卦象结果</p>
        </div>
        
        <div class="coin-result">
          <h3>完整卦象：</h3>
          <div class="yao-display">
            <div 
              v-for="(yao, index) in result.guaXiang.yaos" 
              :key="index"
              class="yao-line"
              :class="{
                'yang-yao': yao.value === 7 || yao.value === 9,
                'yin-yao': yao.value === 6 || yao.value === 8,
                'changing': yao.isChanging
              }"
            >
              <div class="yao-number">{{ 6 - index }}爻</div>
            </div>
          </div>
          
          <div class="gua-info">
            <h4>卦象解读：</h4>
            <div class="gua-detail">
              <p><strong>本卦：</strong>{{ result.bianGua.original.guaName }}卦</p>
              <p><strong>卦辞：</strong>{{ result.bianGua.original.guaCi }}</p>
              <p><strong>象辞：</strong>{{ result.bianGua.original.xiangCi }}</p>
              
              <div v-if="result.bianGua.changingYaos.length > 0" class="bian-gua">
                <p><strong>变卦：</strong>{{ result.bianGua.changed.guaName }}卦</p>
                <p><strong>卦辞：</strong>{{ result.bianGua.changed.guaCi }}</p>
                <p><strong>象辞：</strong>{{ result.bianGua.changed.xiangCi }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="interpretation-section">
        <h3>AI详细解读：</h3>
        <div class="interpretation-content" v-html="result.interpretation"></div>
      </div>
    </div>

    <div v-else class="error-message">
      未获取到卦象结果，请返回重新算卦
    </div>

    <button @click="goBack" class="back-btn">返回重新算卦</button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const props = defineProps({
  result: {
    type: Object,
    default: null
  }
})

const router = useRouter()

const goBack = () => {
  router.push('/step-by-step')
}
</script>

<style scoped>
.result-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  min-height: 100vh;
  background: linear-gradient(135deg, #2C1810 0%, #3A2618 50%, #2C1810 100%);
  color: #F5DEB3;
}

h1 {
  text-align: center;
  color: #D4AF37;
  margin-bottom: 2rem;
}

.gua-result {
  background: rgba(245, 222, 179, 0.95);
  padding: 2rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  color: #2C1810;
}

.question-section {
  margin-bottom: 2rem;
}

.question-section label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.question-text {
  padding: 1rem;
  border: 2px solid #8B4513;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #2C1810;
  font-size: 1rem;
}

.coin-section {
  background: rgba(245, 222, 179, 0.95);
  padding: 2rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  text-align: center;
  color: #2C1810;
}

.current-step {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.yao-display {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 1.5rem;
  margin: 2rem 0;
}

.yao-line {
  position: relative;
  height: 6px;
  margin: 0.5rem 0;
}

.yang-yao {
  width: 120px;
  height: 6px;
  background-color: #D4AF37;
  border-radius: 3px;
}

.yin-yao {
  width: 120px;
  height: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.yin-yao::before,
.yin-yao::after {
  content: '';
  width: 50px;
  height: 6px;
  background-color: #D4AF37;
  border-radius: 3px;
}

.yin-yao::before {
  margin-right: 20px;
}

.yin-yao::after {
  margin-left: 20px;
}

.changing {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.yao-number {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #2C1810;
  font-weight: bold;
}

.gua-info {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(139, 69, 19, 0.2);
  border-radius: 8px;
  border-left: 4px solid #D4AF37;
}

.gua-info h4 {
  color: #D4AF37;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.gua-detail p {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.gua-detail strong {
  color: #D4AF37;
  font-weight: bold;
  margin-right: 0.5rem;
}

.bian-gua {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed #8B4513;
}

.interpretation-section {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(139, 69, 19, 0.2);
  border-radius: 8px;
}

.interpretation-section h3 {
  color: #D4AF37;
  margin-bottom: 1rem;
}

.interpretation-content {
  line-height: 1.8;
}

.gua-display {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 1.5rem;
  margin: 2rem 0;
}

.yao-line {
  position: relative;
  height: 6px;
  margin: 0.5rem 0;
}

.yang-yao {
  width: 120px;
  height: 6px;
  background-color: #D4AF37;
  border-radius: 3px;
}

.yin-yao {
  width: 120px;
  height: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.yin-yao::before,
.yin-yao::after {
  content: '';
  width: 50px;
  height: 6px;
  background-color: #D4AF37;
  border-radius: 3px;
}

.yin-yao::before {
  margin-right: 20px;
}

.yin-yao::after {
  margin-left: 20px;
}

.changing {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.yao-number {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #2C1810;
  font-weight: bold;
}

.gua-info {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(139, 69, 19, 0.2);
  border-radius: 8px;
  border-left: 4px solid #D4AF37;
}

.gua-info h2 {
  color: #D4AF37;
  margin-bottom: 1rem;
}

.gua-ci, .xiang-ci {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.bian-gua {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed #8B4513;
}

.interpretation {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(139, 69, 19, 0.2);
  border-radius: 8px;
}

.interpretation h3 {
  color: #D4AF37;
  margin-bottom: 1rem;
}

.error-message {
  color: #ff6b6b;
  text-align: center;
  margin: 2rem 0;
}

.back-btn {
  display: block;
  width: 100%;
  padding: 1rem;
  background: linear-gradient(45deg, #8B4513, #A0522D);
  color: #F5DEB3;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.back-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(139, 69, 19, 0.4);
}
</style>